<script setup lang="ts">
import myTitle from "@/components/myTitle/myTitle.vue";
import { useMessage } from "wot-design-uni";
const title = ref("设置");
const data = ref([
  {
    name: "用户名",
    src: "45654",
  },
  {
    name: "手机号码",
    src: "166****1234",
  },
  {
    name: "修改密码",
    src: "",
  },
  {
    name: "微信",
    src: "去绑定",
  },
]);

const message = useMessage();

function quitLogin() {
  message
    .confirm({
      title: "是否要退出",
    })
    .then(() => {
      localStorage.clear();
      uni.navigateTo({ url: "/pages/login/index" });
    })
    .catch(() => {
      console.log("点击了取消按钮");
    });
}
</script>

<template>
  <div class="" style="height: 100vh">
    <view>
      <myTitle :title="title" :ifText="true" />
    </view>
    <view>
      <view
        flex
        items-center
        justify-between
        style="
          box-sizing: border-box;
          width: 97%;
          padding: 20rpx;
          margin: auto;
          background-color: #fff;
        "
      >
        <view>头像</view>
        <view>
          <img
            style="width: 50rpx; height: 50rpx; vertical-align: middle; border-radius: 50%"
            src="/src//static//doctor/15.jpg"
            alt=""
          />
          <text><wd-icon name="arrow-right" color="#c9c9cb" size="22px" /></text>
        </view>
      </view>
      <wd-cell-group>
        <wd-cell v-for="item in data" :title="item.name" :value="item.src">
          <template #right-icon>
            <wd-icon color="#c9c9cb" name="arrow-right" size="22px" />
          </template>
        </wd-cell>
      </wd-cell-group>
      <wd-cell-group mt-20rpx>
        <wd-cell title="关于我们">
          <template #right-icon>
            <wd-icon color="#c9c9cb" name="arrow-right" size="22px" />
          </template>
        </wd-cell>
      </wd-cell-group>
      <view
        style="
          width: 100%;
          height: 88rpx;
          line-height: 88rpx;
          color: #ec5e5e;
          text-align: center;
          background-color: #fff;
        "
        mt-20rpx
        @click="quitLogin"
      >
        退出登录
      </view>

      <wd-message-box :zIndex="999" />
    </view>
  </div>
</template>

<style lang="scss" scoped></style>
